<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" @submit.native.prevent>
      <el-form-item label="楼层分类">
        <el-select v-model="listQuery.q_floorClassId" size="small" placeholder="请选择">
          <el-option v-for="item in floor" :label="item.name" :key="item.id" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="small" type="primary" @click="checkList">查询</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="button-table-margin">
      <el-button size="small" type="primary" @click='addFloorData' v-permission="['admin/pcindex/floordata/create']">添加
      </el-button>
      <el-button size="small" type="primary" @click='editFloorData' v-permission="['admin/pcindex/floordata/update']">修改
      </el-button>
      <el-button size="small" type="primary" @click='del' v-permission="['admin/pcindex/floordata/delete']">删除
      </el-button>
    </div>
    <el-table ref="singleTable" :data="dataList" v-loading="listLoading" border fit highlight-current-row
      style="width: 100%" @current-change="handleCurrentChange">
      <el-table-column type="index" align="center" width="50">
      </el-table-column>
      <el-table-column label="商品图片" width="100">
        <template slot-scope="scope">
          <el-image :src="$imagePath+scope.row.product.masterImg"></el-image>
        </template>
      </el-table-column>
      <el-table-column property="productName" width="400px" label="商品">
      </el-table-column>
      <el-table-column label="楼层分类" width="120" property="floorClassName">
      </el-table-column>
      <el-table-column property="orderNo" label="排序号">
      </el-table-column>
      <el-table-column property="updateUserName" label="修改人">
      </el-table-column>
      <el-table-column property="updateTime" width="200" label="修改时间">
      </el-table-column>
      <el-table-column property="createUserName" label="创建人">
      </el-table-column>
      <el-table-column property="updateTime" width="200" label="创建时间">
      </el-table-column>
      <el-table-column property="remark" width="200" label="备注" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />
    <el-dialog :title="judgmentTitle" :visible.sync="dialogFormVisible" width="70%">
      <div class="app-container">
        <el-row>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
            class="demo-ruleForm el-form-bottom">
            <el-col :span="24">
              <el-form-item label="楼层分类" prop="floorClassId">
                <el-select v-model="ruleForm.floorClassId" placeholder="请选择" style="width: 296.66px">
                  <el-option v-for="item in floorClass" :label="item.name" :key="item.id" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="排序" prop="orderNo">
                <el-input-number v-model="ruleForm.orderNo" :min="0" :max="99" label=""></el-input-number>
                <span class="form-word-hint">序号越小越靠前 最大99</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="商品">
                <el-button type="warning" @click.prevent="chooseProduct" icon="el-icon-search">选择</el-button>
                <span class="form-word-hint">商品只能选择不能输入</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="已选商品" prop="productName">
                <el-input v-model="ruleForm.productName" readonly style="width: 296.66px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="ruleForm.remark" style="width: 296.66px"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-dialog title="选择商品" :visible.sync="dialogFormVisible2" :modal-append-to-body='false' :append-to-body='true'>
          <div style="margin-bottom: 10px;">
            <label class="radio-label">商品名称：</label>
            <el-input v-model="listQuery.q_name1" style="width: 200px;" size="small" class="filter-item" />
            <label class="radio-label" style="margin-left: 10px;">商家：</label>
            <el-select v-model="listQuery.q_sellerId" size="small" placeholder="请选择">
              <el-option v-for="item in seller" :label="item.sellerName" :key="item.id" :value="item.id">
              </el-option>
            </el-select>
            <el-button class="filter-item" size="small" type="primary" style="margin-left: 10px;" @click="check">查询
            </el-button>
          </div>
          <el-table ref="singleTable" :data="productList" border height="350" tooltip-effect="dark"
            highlight-current-row style="width: 100%" @current-change="handleSelectionChange">
            <el-table-column width="100" label="商品图片">
              <template slot-scope="scope">
                <el-image :src="$imagePath+scope.row.masterImg"></el-image>
              </template>
            </el-table-column>
            <el-table-column property="name1" show-overflow-tooltip width="350" label="商品名称"></el-table-column>
            <el-table-column property="seller" width="150" label="商家"></el-table-column>
            <el-table-column property="productCateName" width=" 100" label="商品分类"></el-table-column>
            <el-table-column property="sellerCateName" width=" 100" label="店铺分类"></el-table-column>
            <el-table-column property="productBrandName" width=" 100" label="商品品牌"></el-table-column>
            <el-table-column property="productCode" width=" 100" label="商品编码"></el-table-column>
            <el-table-column property="costPrice" width=" 100" label="成本价"></el-table-column>
            <el-table-column property="protectedPrice" width=" 100" label="保护价"></el-table-column>
            <el-table-column property="productStock" width=" 100" label="库存"></el-table-column>
            <el-table-column property="actualSales" width=" 100" label="销量"></el-table-column>
            <el-table-column width="100" label="是否推荐">
              <template slot-scope="scope">
                {{ codeBox.PRODUCT_IS_TOP[scope.row.isTop] }}
              </template>
            </el-table-column>
            <el-table-column width="100" label="状态">
              <template slot-scope="scope">
                {{ codeBox.PRODUCT_STATE[scope.row.state] }}
              </template>
            </el-table-column>
            <el-table-column property="upTime" width=" 180" label="上架时间"></el-table-column>
            <el-table-column property="createTime" width=" 180" label="创建时间"></el-table-column>
            <el-table-column property="saleScale1" width=" 100" label="一级分佣"></el-table-column>
            <el-table-column property="saleScale2" width=" 100" label="二级分佣"></el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="chooseProduct" />
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancle">
              取消
            </el-button>
            <el-button type="primary" @click="updateProductData">
              确定
            </el-button>
          </div>
        </el-dialog>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    toPcFloorDataList,
    fetchPcFloorDataList,
    delFloorData,
    toAddPcFloorData,
    createFloorData,
    getProductsDialog,
    editFloorData,
    updateFloorData
  } from '@/api/pcIndex'
  import Pagination from '@/components/Pagination'
  import {
    Message
  } from 'element-ui'
  import {
    getCodeManager,
    getSellers
  } from '@/api/all'
  export default {
    name: 'pcindexfloordatalist',
    components: {
      Pagination
    },
    data() {
      return {
        dataList: [],
        floor: [],
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 20,
          q_floorClassId: ''
        },
        currentRow: null,
        judgmentTitle: 'PC首页楼层数据添加',
        judgmentType: '1',
        dialogFormVisible: false,
        floorClass: [],
        seller: [],
        productList: [], // 商品列表
        total: 0,
        multipleSelection: null,
        ruleForm: {
          floorClassId: "",
          refId: '',
          orderNo: "",
          productName: '',
          remark: ''
        },
        listQuery: {
          page: 1,
          limit: 20,
          q_name1: '',
          q_state1: '6',
          q_sellerId: ''
        },
        rules: {
          floorClassId: [{
            required: true,
            message: "请选择楼层分类",
            trigger: "change"
          }, ],
          productName: [{
            required: true,
            message: "请选择商品",
            trigger: "blur"
          }],
          orderNo: [{
            required: true,
            message: "请输入排序号",
            trigger: "blur"
          }],
          remark: [{
            max: 50,
            message: '不能超过50个字符',
            trigger: 'blur'
          }]
        },
        dialogFormVisible2: false
      }
    },
    created() {
      toPcFloorDataList().then(res => {
        this.floor = res.data.data.floorClasss
      })
      getCodeManager('PRODUCT_IS_TOP,PRODUCT_STATE', () => {})
      toAddPcFloorData().then(res => {
        this.floorClass = res.data.data.floorClasss
        this.seller = res.data.data.sellers
      })
      this.getList()
    },
    methods: {
      handleCurrentChange(val) {
        // 选中当前行数据
        this.currentRow = val
      },
      // 获取列表数据
      getList() {
        this.listLoading = true
        fetchPcFloorDataList(this.listQuery).then(response => {
          this.dataList = response.data.rows
          this.total = response.data.total
          this.listLoading = false
          console.log(this.dataList)
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      checkList() {
        this.getList()
      },
      reset() {
        this.listQuery = {
          page: 1,
          limit: 20,
          q_floorClassId: ''
        }
        this.getList()
      },
      addFloorData() {
        this.judgmentTitle = 'PC首页楼层数据添加'
        this.judgmentType = '1'
        this.dialogFormVisible = true;
        this.resetForm('ruleForm')
      },
      editFloorData() {
        if (!this.currentRow) {
          Message.error('请选择操作行。')
          return;
        };
        editFloorData({
          pcIndexFloorDataId: this.currentRow.id
        }).then(res => {
          this.ruleForm = res.data.data.pcIndexFloorData
        })
        this.judgmentTitle = 'PC首页楼层数据编辑'
        this.judgmentType = '2'
        this.dialogFormVisible = true;
      },
      del() {
        if (!this.currentRow) {
          Message.error('请选择操作行。')
          return;
        };
        this.$confirm('确定删除吗？', '提示', {
          onfirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delFloorData({
            id: this.currentRow.id
          }).then(res => {
            if (res.data.success) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getList()
            } else {
              this.$message({
                type: 'error',
                message: res.data.message
              });
            }
          })
        })
      },
      updateTool(id) {
        this.$router.push({
          path: '/pcIndex/floordata/pcindexfloordataedit',
          query: {
            id: id
          }
        });
      },
      delTool(id) {
        this.$confirm('确定删除吗？', '提示', {
          onfirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delFloorData({
            id: id
          }).then(res => {
            if (res.data.success) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getList()
            } else {
              this.$message({
                type: 'error',
                message: res.data.message
              });
            }
          })
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      updateProductData() {
        if (this.multipleSelection == null) {
          Message.error('请选择商品');
          return;
        }
        this.ruleForm.refId = this.multipleSelection.id;
        this.ruleForm.productName = this.multipleSelection.name1;
        this.dialogFormVisible2 = false;
        this.listQuery.q_name1 = "";
        this.listQuery.q_sellerId = "";
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.judgmentType == '1') {
              createFloorData(this.ruleForm).then(res => {
                console.log(res)
                if (!res.data.success) {
                  Message.error(res.data.message);
                  return;
                }
                Message.success('操作成功')
                this.resetForm('ruleForm')
                this.dialogFormVisible = false;
                this.getList()
              })
            } else {
              let params = {
                id: this.ruleForm.id,
                floorClassId: this.ruleForm.floorClassId,
                refId: this.ruleForm.refId,
                orderNo: this.ruleForm.orderNo,
                productName: this.ruleForm.productName,
                remark: this.ruleForm.remark
              }
              updateFloorData(params).then(res => {
                console.log(res)
                if (!res.data.success) {
                  Message.error(res.data.message);
                  return;
                }
                Message.success('操作成功')
                this.resetForm('ruleForm')
                this.dialogFormVisible = false;
                this.getList()
              })
            }
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      back() {
        history.back();
      },
      check() {
        getProductsDialog(this.listQuery).then(response => {
          this.productList = response.data.rows
          this.total = response.data.total
          console.log(this.productList)
        })
      },
      cancle() {
        this.dialogFormVisible2 = false
        this.listQuery.q_name1 = "";
        this.listQuery.q_sellerId = "";
      },
      chooseProduct() {
        this.dialogFormVisible2 = true;
        // 获取关联规格列表
        getProductsDialog(this.listQuery).then(res => {
          this.productList = res.data.rows;
          this.total = res.data.total
        })
      },
    }
  }
</script>
<style scoped>
  .filter-container .el-col-6 {
    margin-bottom: 15px;
  }

  .filter-item {
    margin-bottom: 0
  }

  /deep/ .filter-container label {
    font-size: 14px;
    font-weight: 500;
    margin-right: 10px;
  }
</style>
